<template>
  <div class="report-form-content">
    <div>
      <el-tabs v-model="activeName" class="demo-tabs">
        <el-tab-pane label="基础信息" name="first"></el-tab-pane>
        <el-tab-pane label="政府采购" name="second"></el-tab-pane>
        <el-tab-pane label="分年度资金计划" name="third"></el-tab-pane>
        <el-tab-pane label="项目绩效信息" name="fourth"></el-tab-pane>
        <el-tab-pane label="附件信息" name="five"></el-tab-pane>
      </el-tabs>
      <div class="tabs-list" v-show="activeName === 'first'">
        <el-row :gutter="20">
          <el-col :sm="24" :lg="29" style="padding-left: 20px">
            <h2>基础信息</h2>
            <el-card class="update-log">
              <div class="report-form-list-content">
                <div class="data-item">
                  <label>一上编制编码</label>
                  <span>{{ obj.code }}</span>
                </div>
                <div class="data-item">
                  <label>一上编制名称</label>
                  <span>{{ obj.name }}</span>
                </div>
                <div class="data-item">
                  <label>存续状态</label>
                  <span>{{ showDictLabel('BudgetProjectViability', obj.viability) }}</span>
                </div>
                <div class="data-item">
                  <label>项目起始年度</label>
                  <span>{{ obj.startTime }}</span>
                </div>
                <div class="data-item">
                  <label>项目终止年度</label>
                  <span>{{ obj.endTime }}</span>
                </div>
                <div class="data-item">
                  <label>项目来源</label>
                  <span>{{ showDictLabel('BudgetProjectSource', obj.source) }}</span>
                </div>
                <div class="data-item">
                  <label>申报属性</label>
                  <span>{{ showDictLabel('BudgetProjectAttribute', obj.attribute) }}</span>
                </div>
                <div class="data-item">
                  <label>申请财政金额</label>
                  <span>￥{{ obj.totalFund }}</span>
                </div>
                <div class="data-item">
                  <label>社会投入资金</label>
                  <span>￥{{ obj.putinFund }}</span>
                </div>
                <div class="data-item">
                  <label>当年资金</label>
                  <span>￥{{ obj.currFund }}</span>
                </div>
                <div class="data-item">
                  <label>用款单位</label>
                  <span>{{ showIdLabel(governmentList, obj.useGovId, 'governmentName') }}</span>
                </div>
                <div class="data-item">
                  <label>申报单位</label>
                  <span>{{ showIdLabel(governmentList, obj.applyGovId, 'governmentName') }}</span>
                </div>
                <div class="data-item">
                  <label>上一年项目预算安排情况</label>
                  <span>{{ obj.previousArrange }}</span>
                </div>
                <div class="data-item">
                  <label>主管部门</label>
                  <span>{{ showIdLabel(budgetCompetentList, obj.managerOrgId, 'name') }}</span>
                </div>
                <div class="data-item">
                  <label>主管部门联系人</label>
                  <span>{{ showIdLabel(budgetCompetentList, obj.managerOrgId, 'contact') }}</span>
                </div>
                <div class="data-item">
                  <label>主管部门联系电话</label>
                  <span>{{ showIdLabel(budgetCompetentList, obj.managerOrgId, 'telephone') }}</span>
                </div>
                <div class="data-item">
                  <label>是否债券可用项目</label>
                  <span>{{ showEnumLabel('CommonYesNo', obj.isDebenture) }}</span>
                </div>
                <div class="data-item">
                  <label>是否科研项目</label>
                  <span>{{ showEnumLabel('CommonYesNo', obj.isScientific) }}</span>
                </div>
              </div>
              <div class="data-item data-item-1">
                <label>项目概述</label>
                <span>{{ obj.summarize }}</span>
              </div>
              <div class="data-item data-item-1">
                <label>设立依据及申报理由</label>
                <span>{{ obj.reason }}</span>
              </div>
              <div class="report-form-list-content">
                <div class="data-item">
                  <label>项目总额</label>
                  <span>{{ obj.system }}</span>
                </div>
                <div class="data-item">
                  <label>是否基建项目</label>
                  <span>{{ showEnumLabel('CommonYesNo', obj.isConstruction) }}</span>
                </div>
              </div>
            </el-card>
            <el-card class="update-log" v-if="obj.isConstruction === '1'">
              <label class="form-label">基建类项目信息</label>
              <div class="form-list-content">
                <div class="data-item">
                  <label>基建立项情况</label>
                  <span>{{ showDictLabel('BudgetProjectConstruction', obj.constructionDesc) }}</span>
                </div>
                <div class="data-item">
                  <label>是否代建项目</label>
                  <span>{{ showEnumLabel('CommonYesNo', obj.isAgent) }}</span>
                </div>
                <div class="data-item" v-if="obj.isAgent === '1'">
                  <label>代建单位</label>
                  <span>{{ showIdLabel(governmentList, obj.agentGovId, 'governmentName') }}</span>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-divider />
      </div>
      <div class="tabs-list" v-show="activeName === 'second'">
        <div class="" style="display: flex;align-items: center;" v-if="obj.isGovernmentPurchase">
          <h2>政府采购</h2>
        </div>
        <el-card class="update-log" v-if="obj.isGovernmentPurchase">
          <div class="report-form-list-content" v-for="(item,index) in purchases" :key="index">
            <label class="form-label">政府采购{{ index + 1 }}</label>
            <el-card class="update-log update-log-1">
              <div class="report-form-list-content">
                <div class="data-item">
                  <label>采购项目</label>
                  <span>{{ item.purchaseItem }}</span>
                </div>
                <div class="data-item">
                  <label>采购品目</label>
                  <span>{{ item.purchaseKind }}</span>
                </div>
                <div class="data-item">
                  <label>采购需求概况</label>
                  <span>{{ item.purchaseRequire }}</span>
                </div>
                <div class="data-item">
                  <label>预计采购时间</label>
                  <span>{{ item.purchaseDate }}</span>
                </div>
              </div>
              <div class="report-form-list-content">
                <div class="data-item">
                  <label>资金性质</label>
                  <span>{{ item.purchaseAttr }}</span>
                </div>
                <div class="data-item">
                  <label>采购金额</label>
                  <span>￥{{ item.purchaseFund }}</span>
                </div>
                <div class="data-item">
                  <label>单价</label>
                  <span>￥{{ item.purchasePrice }}</span>
                </div>
                <div class="data-item">
                  <label>采购数量</label>
                  <span>{{ item.purchaseNum }}</span>
                </div>
                <div class="data-item">
                  <label>计量单位</label>
                  <span>{{ item.purchaseUnit }}</span>
                </div>
              </div>
            </el-card>
          </div>
        </el-card>
        <el-card v-else>无政府采购</el-card>
      </div>
      <div class="tabs-list" v-show="activeName === 'third'">
        <div class="" style="display: flex;align-items: center;">
          <h2>项目资金构成（单位: 元）</h2>
        </div>
        <div class="report-form-list-content" v-for="(item,index) in items" :key="index">
          <label class="form-label">项目资金构成{{ index + 1 }}</label>
          <el-card class="update-log update-log-1">
            <div class="report-form-list-content">
              <div class="data-item">
                <label>年度</label>
                <span>{{ item.year }}</span>
              </div>
              <div class="data-item">
                <label>明细项目类别</label>
                <span>{{ showIdLabel(itemTypeList, item.itemType, 'itemTypeName') }}</span>
              </div>
              <div class="data-item">
                <label>开支范围</label>
                <span>{{ showIdLabel(itemRangeAllList, item.itemRange, 'itemRangeName') }}</span>
              </div>
              <div class="data-item">
                <label>开支内容</label>
                <span>{{ item.itemName }}</span>
              </div>
              <div class="data-item">
                <label>计量单位</label>
                <span>{{ item.unit }}</span>
              </div>
              <div class="data-item">
                <label>单价/支出标准</label>
                <span>￥{{ item.price }}</span>
              </div>
              <div class="data-item">
                <label>工作量</label>
                <span>{{ item.num }}</span>
              </div>
              <div class="data-item">
                <label>测算依据及说明</label>
                <span>{{ item.reason }}</span>
              </div>
              <div class="data-item">
                <label>按标准测算金额</label>
                <span>￥{{ item.price * item.num }}</span>
              </div>
            </div>
            <div class="form-list-content-1">
              <div class="data-item data-item-1">
                <label>备注</label>
                <span>{{ item.remark }}</span>
              </div>
            </div>
          </el-card>
        </div>

        <h2>分年度资金计划</h2>
        <el-card class="update-log">
          <div v-for="(item,index) in years" :key="index">
            <label class="form-label">{{item.year}}年度</label>
            <div class="report-form-list-content">
              <div class="data-item">
                <label>单位申报数</label>
                <span>{{ item.applyFund }}</span>
              </div>
              <div class="data-item">
                <label>三保目录</label>
                <span>{{ showIdLabel(thirdCatalogList, item.thirdCatalog, 'thirdName') }}</span>
              </div>
              <div class="data-item">
                <label>热点分类</label>
                <span>{{ showIdLabel(hotCatalogList, item.hotCatalog, 'hotName') }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </div>
      <div class="tabs-list" v-show="activeName === 'fourth'">
        <h3>绩效目标</h3>
        <el-card class="update-log">
          <div class="data-item data-item-1 data-item-target">
            <label>总体绩效目标</label>
            <span>{{ obj.targetAll }}</span>
          </div>
          <div class="data-item data-item-1 data-item-target">
            <label>年度绩效目标</label>
            <span>{{ obj.targetCurrent }}</span>
          </div>
        </el-card>
        <!-- <div class="add-indexs">
          <h3>总体绩效指标</h3>
        </div>
        <el-card class="update-log">
          <el-table
              :data="KpisAll"
              style="width: 100%; margin-bottom: 20px"
              row-key="id"
              class="indexsTabel"
              border
              default-expand-all
          >
            <el-table-column prop="kpiName" label="指标名称" />
            <el-table-column prop="kpiName" label="指标名称" />
            <el-table-column prop="kpiContent" label="指标解释" />
            <el-table-column prop="kpiValue" label="指标值" />
            <el-table-column prop="remark" label="备注" />
          </el-table>
        </el-card> -->
        <div class="add-indexs">
          <h3>本年度绩效指标</h3>
        </div>
        <el-card class="update-log">
          <el-table
              :data="KpisCurrent"
              style="width: 100%; margin-bottom: 20px"
              row-key="id"
              class="indexsTabel"
              border
              default-expand-all
          >
            <el-table-column prop="kpiName" label="指标名称" />
            <el-table-column prop="kpiName" label="指标名称" />
            <el-table-column prop="kpiContent" label="指标解释" />
            <el-table-column prop="kpiValuePeriod" label="指标周期值" />
            <el-table-column prop="kpiValue" label="年度指标值" />
            <el-table-column prop="remark" label="备注" />
          </el-table>
        </el-card>
      </div>
      <div class="tabs-list" v-show="activeName === 'five'">
        <!--
        <div class="file-list-btn">
          <div class="file-list-btns">
            <el-button type="primary" style="margin-left: 20px;">批量下载</el-button>
          </div>
        </div>
        -->
        <el-table
          :data="fileList"
          style="width: 100%; margin-top: 20px"
          row-key="id"
          border
        >
          <el-table-column prop="fileType"  label="附件类型">
            <template v-slot="{row}">{{ showDictLabel('BudgetProjectFileType', row.fileType) }}</template>
          </el-table-column>
          <el-table-column prop="attachmentName" label="附件名称" />
          <el-table-column  label="操作">
            <template v-slot="{row}">
              <el-button type="primary" @click="downloadBtn(row)">下载</el-button>
              <el-button type="primary" @click="prviewdBtn(row)">预览</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
  <el-dialog v-model="attachmentVisible" title="附件预览" width="70%" top="2vh">
    <attachmentPreview v-model:attachmentId="previewAttachmentId" />
    <div style="text-align:right;">
      <el-button type="danger" @click="closeBtn">关闭</el-button>
    </div>
  </el-dialog>
</template>
<script setup>
import {ref, watch} from 'vue'
import {doGet, doGetDownload} from "@/config/http";
import {svc, showIdLabel, arrChangeTreeFn, getListPageSize, showDictLabel, showEnumLabel} from '@/config/common'
import attachmentPreview from '@/views/components/base/attachmentPreview.vue'
import initListStore from '@/store/modules/initList'

const props = defineProps({
  projectTwoId: {
    required: true,
    type: String,
  }
})

const emit = defineEmits(['close', 'projectListSelect'])

// tab 切换
let activeName = ref('first')
// 基本数据
let obj = ref({})
// 项目预算明细
let items = ref([])
// 分年度资金计划
let years = ref([])
// 本年度指标
let KpisCurrent = ref([])
// 总指标
let KpisAll = ref([])
// 政府采购
let purchases = ref([])
// 附件
let fileList = ref([])

// 三保目录
let thirdCatalogList = initListStore().thirdCatalogList
// 热点分类
let hotCatalogList = initListStore().hotCatalogList
// 单位列表
let governmentList = initListStore().governmentList
// 主管部门
let organizationList = ref([])
let budgetCompetentList = initListStore().budgetCompetentList
// 项目类别
const itemTypeList = initListStore().itemTypeList
// 开支范围
const itemRangeAllList = initListStore().itemRangeAllList

let attachmentVisible = ref(false)
let previewAttachmentId = ref(null)

watch(() => props.projectTwoId, async val => {
  await initObj(val)
  // await initList()
},{immediate:true})

// 获取数据
async function initObj(id) {
  let p1 = doGet(svc, '/budget-project-two/' + id, {}, true)
  let p2 = doGet(svc, '/budget-project-two-item/listByField', {field: 'projectTwoId', values: id}, false)
  let p3 = doGet(svc, '/budget-project-two-year/listByField', {field: 'projectTwoId', values: id}, false)
  let p4 = doGet(svc, '/budget-project-two-kpi/listByField', {field: 'projectTwoId', values: id, sortField: 'weight',sortType: 'asc'}, false)
  let p5 = doGet(svc, '/budget-project-two-file/listByField', {field: 'projectTwoId', values: id}, false)
  let resArray = await Promise.all([p1, p2, p3, p4, p5])
  obj.value = resArray[0]
  items.value = resArray[1]
  years.value = resArray[2]
  let kpisArr = resArray[3]
  KpisCurrent.value = arrChangeTreeFn(kpisArr.filter(item => item.performanceType === '1'))
  fileList.value = resArray[4]
  obj.value.totalFund = 0
  items.value.map(item => {
    obj.value.totalFund += parseFloat(item.price) * parseFloat(item.num)
  })
}

// 获取下拉框数据列表
// async function initList() {
//   let p1 = doGet(svc, '/budget-third-catalog/page', {pageSize: getListPageSize()}, false)
//   let p2 = doGet(svc, '/budget-hot-catalog/page', {pageSize: getListPageSize()}, false)
//   let p3 = doGet(svc, '/government/page', {pageSize: getListPageSize()}, false)
//   let p4 = doGet(svc, '/organization/page', {pageSize: getListPageSize()}, false)
//   let p5 = doGet(svc, '/budget-item-type/page', {pageSize: getListPageSize()}, false)
//   let p6 = doGet(svc, '/budget-item-range/page', {pageSize: getListPageSize()}, false)
//   let p7 = doGet(svc, '/budget-competent/page', {pageSize: getListPageSize()}, false)
//   let resArray = await Promise.all([p1, p2, p3, p4, p5, p6, p7])
//   // 三保目录
//   thirdCatalogList.value = resArray[0]['records']
//   // 热点分类
//   hotCatalogList.value = resArray[1]['records']
//   // 单位列表
//   governmentList.value = resArray[2]['records']
//   // 主管部门
//   organizationList.value = resArray[3]['records']
//   itemTypeList.value = resArray[4]['records']
//   itemRangeAllList.value = resArray[5]['records']
//   budgetCompetentList.value = resArray[6]['records']
// }

// 组装指标树结构
function kpisCompose(list, pid) {
  return list.filter((item) => !pid ? item.parentId === null : item.parentId === pid).map(item => {
    item.children = kpisCompose(list, item.id);
    return item;
  });
}
function downloadBtn(row) {
  doGetDownload(svc, '/customAttachment/download/' + row.attachmentId, {})
}
// 预览
function prviewdBtn(row) {
  attachmentVisible.value = true
  setTimeout(() => {
    previewAttachmentId.value = row.attachmentId
  },100)
}
function closeBtn() {
  attachmentVisible.value = false
}
</script>
<style scoped>
.report-form-list-content .el-form-item__label {
  width: 220px !important;
}
.report-form-list-content {
  display: flex;
  flex-wrap: wrap;
}
.form-label {
  display: inline-flex;
  justify-content: flex-end;
  align-items: flex-start;
  flex: 0 0 auto;
  font-size: 16px;
  color: #337ecc;
  height: 32px;
  line-height: 32px;
  padding: 0 12px 0 0;
  box-sizing: border-box;
  width: 200px;
  font-weight: bold;
}
.update-log {
  width: 100%;
  margin-bottom: 30px;
}
.update-log-1 {
  margin-top: 0;
}
.add-indexs {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.data-item {
  width: 420px;
  display: flex;
  align-items: center;
  overflow: hidden;
  margin: 10px 0;
  font-size: 16px;
  border-bottom: 1px solid #eee;
}
.data-item-1 {
  width: 100%;
  align-items:flex-start
}
.data-item-1 label {
  width: 200px !important;
}
.data-item-target {
  margin: 70px 0;
}
.data-item label {
  width: 290px;
  text-align: right;
}
.data-item span {
  padding-left: 15px;
  display: inline-block;
  width: 100%;
}
</style>
